<template>
  <div class="Template8__layer"
       :style="{backgroundColor: formData.maskColor, width: ((editorDevice === 'desktop' || editorDevice === 'all') &&  formData.showDevice !== 'mobile') ? '100%' : '475px', transform: ((editorDevice === 'desktop' || editorDevice === 'all') &&  formData.showDevice !== 'mobile') ? 'none': 'scale(0.8)'}">
    <div class="Template8PcWrap"
         :style="{background: `none center center / cover no-repeat scroll ${formData.baseMap1}`,  width: ((editorDevice === 'desktop' || editorDevice === 'all') &&  formData.showDevice !== 'mobile') ? '550px' : 'calc(100% - 40px)'}"
         style="position: absolute; transform: scale(1);"
    >
      <div class="Template8__img-wrapper"
           :style="{background: `url(${formData.imageUrl}) center center / cover no-repeat scroll ${formData.imageColor}`}">
        <div class="Template8__title" v-html="formData.popupTitle"></div>
        <div class="Template8__desc" v-html="formData.programme"></div>
        <div class="Template8__countdown">
          <div class="Template8__countdown_minute" v-if="formData.fixedCountdownDay > 0"><span class="Template8__countdown_word"
                                                         :style="{color: formData.countdownTextColor, backgroundColor: formData.countdownBackgroundColor}">{{getTimeStr(formData.fixedCountdownDay, 0)}}</span><span
              class="Template8__countdown_word"
              :style="{color: formData.countdownTextColor, backgroundColor: formData.countdownBackgroundColor}">{{getTimeStr(formData.fixedCountdownDay, 1)}}</span><span
              class="Template8__countdown_colon" :style="{color: formData.countdownBackgroundColor}">:</span></div>
          <div class="Template8__countdown_minute" v-if="formData.fixedCountdownHour > 0"><span class="Template8__countdown_word"
                                                         :style="{color: formData.countdownTextColor, backgroundColor: formData.countdownBackgroundColor}">{{getTimeStr(formData.fixedCountdownHour, 0)}}</span><span
              class="Template8__countdown_word"
              :style="{color: formData.countdownTextColor, backgroundColor: formData.countdownBackgroundColor}">{{getTimeStr(formData.fixedCountdownHour, 1)}}</span><span
              class="Template8__countdown_colon" :style="{color: formData.countdownBackgroundColor}">:</span></div>
          <div class="Template8__countdown_minute"><span class="Template8__countdown_word"
                                                         :style="{color: formData.countdownTextColor, backgroundColor: formData.countdownBackgroundColor}">{{getTimeStr(formData.fixedCountdownMinute, 0)}}</span><span
              class="Template8__countdown_word"
              :style="{color: formData.countdownTextColor, backgroundColor: formData.countdownBackgroundColor}">{{getTimeStr(formData.fixedCountdownMinute, 1)}}</span><span
              class="Template8__countdown_colon" :style="{color: formData.countdownBackgroundColor}">:</span></div>
          <div class="Template8__countdown_second"><span class="Template8__countdown_word"
                                                         :style="{color: formData.countdownTextColor, backgroundColor: formData.countdownBackgroundColor}">{{getTimeStr(formData.fixedCountdownSecond, 0)}}</span><span
              class="Template8__countdown_word"
              :style="{color: formData.countdownTextColor, backgroundColor: formData.countdownBackgroundColor}">{{getTimeStr(formData.fixedCountdownSecond, 1)}}</span>
          </div>
        </div>
      </div>
      <div class="Template8__content" :class="{'isMobile': editorDevice === 'h5'}">
        <div class="Template8__coupon" :style="{color: formData.popupColor}"  v-if="formData.couponCodeText">{{formData.couponCodeText}}</div>
        <div class="Template8__btn"
             :style="{backgroundColor: formData.btnBackgroundColor, borderColor: formData.btnBackgroundColor}"
             v-html="formData.btnText"></div>
      </div>
      <i @click="handleClose" class="jyfont card-col-close icon_custom_6fda Template8__close-icon el-icon-close"></i></div>
    <div class="Template8__mode_edit"></div>
  </div>
</template>

<script>
import {parseCountDownTimeData} from '@/utils/utils';
import {mapGetters} from 'vuex';
export default {
    name: 'FlashSale',
    props: {
        formData: {
            type: Object,
            default: () => ({})
        },
        deviceName: {
            type: String,
            default: 'desktop'
        }
    },
    watch: {
        deviceName (newValue) {
            this.editorDevice = newValue;
        },
        editor (newValue) {
            this.editorDevice = newValue;
        }
    },
    data () {
        return {
            editorDevice: 'all'
        };
    },
    computed: {
        ...mapGetters({editor: 'editorDevice'})
    },
    methods: {
        timeStr (time) {
            console.log(parseCountDownTimeData(time));
            return parseCountDownTimeData(time);
        },
        getTimeStr (time, index) {
            if (time < 10) {
                if (index === 0) {
                    return 0;
                }
                return time;
            }
            return time.toString().charAt(index);
        },
        handleClose () {
            this.$emit('close');
        }
    }
};
</script>

<style lang="scss" scoped>
.Template8__layer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .Template8PcWrap {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 3;
    line-height: 1.5;
    text-align: center;
    color: #000;
    font-size: 14px;

    .Template8__img-wrapper {
      padding: 30px 65px 46px;
      width: 100%;
      height: 300px;

      .Template8__title, .Template8__desc {
        margin: 0 auto;
      }
      .Template8__title{
        max-height: 100px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
      }

      .Template8__countdown {
        margin: 60px auto 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .Template8__countdown_minute, .Template8__countdown_second {
          display: flex;
          flex-direction: row;
          align-items: center;

          .Template8__countdown_word {
            margin-right: 5px;
            width: 42px;
            height: 69px;
            line-height: 69px;
            border-radius: 2px;
            font-weight: bold;
            font-size: 30px;
          }

          .Template8__countdown_colon {
            margin: 0 3px;
            font-weight: bold;
            font-size: 30px;
          }
        }
      }
    }

    .Template8__content {
      padding: 40px;
      &.isMobile{
        padding: 20px 120px;
      }

      .Template8__coupon {
        position: relative;
        margin: 0 auto 20px;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        font-weight: bold;
        border: 2px dashed #b70000;
        border-radius: 4px;
        cursor: pointer;
      }

      .Template8__btn {
        display: inline-block;
        padding: 0 20px;
        min-width: 240px;
        height: 50px;
        line-height: 50px;
        background-color: #000;
        border: 1px solid #000;
        border-radius: 4px;
        outline: none;
        cursor: pointer;
      }
    }
  }

  .Template8__close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    line-height: 16px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.Template8__btn {
  p {
    margin: 0;
  }
}
</style>
